<template>
  <div class="business">
    <el-card class="box-card">
      <div>
        <el-form :inline="true" :model="form">
          <el-form-item label="企业编号">
            <el-input v-model="form.eid" class="bgc" />
          </el-form-item>
          <el-form-item label="企业名称">
            <el-input v-model="form.name" class="bgc1" />
          </el-form-item>
          <el-form-item label="创建者">
            <el-input v-model="form.username" class="bgc" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form.status" placeholder="请选择状态">
              <el-option value="0" label="禁用" />
              <el-option value="1" label="启用" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="eliminate">清除</el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="Added"
            >新增企业</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="card">
      <el-table :data="list">
        <el-table-column label="序号">
          <template v-slot="{ $index }">
            <div>
              {{ (page.page - 1) * page.limit + $index + 1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="企业编码" prop="eid" />
        <el-table-column label="企业名称" prop="name" />
        <el-table-column label="创建者" prop="short_name" />
        <el-table-column label="创建日期" prop="update_time" />
        <el-table-column label="状态" prop="status">
          <template v-slot="{ row }">
            <div :class="{ red: row.status === 0 }">
              {{ start[row.status] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <div>
              <el-button type="text" @click="compiles(row)">编辑</el-button>
              <el-button type="text" @click="compile(row.id)">{{
                !row.status ? '启用' : '禁用'
              }}</el-button>
              <el-button type="text" @click="del(row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          style="text-align: center"
          background
          :current-page="page.page"
          :page-sizes="[1, 2, 3]"
          :page-size="page.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="sizechange"
          @current-change="pagechange"
        />
      </div>
    </el-card>
    <Add ref="add" v-model="isShow" @getData="getData" />
  </div>
</template>

<script>
import {
  enterpriseList,
  enterpriseRemove,
  enterpriseStatus
} from '@/api/business.js'
import Add from './commpno/Abb.vue'
export default {
  components: {
    Add
  },
  data() {
    return {
      form: {
        eid: '',
        name: '',
        username: '',
        status: ''
      },
      list: [{}],
      page: {
        limit: 1,
        total: 400,
        page: 1
      },
      start: {
        0: '禁用',
        1: '启用'
      },
      isShow: false
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 获取数据
    async getData() {
      // console.log('123');
      const res = await enterpriseList({ ...this.page, ...this.form })
      console.log('获取数据123', res)
      this.list = res.data.data.items
      this.page.total = res.data.data.pagination.total
      this.page.page = +res.data.data.pagination.page
    },
    // 页容发生变化
    sizechange(size) {
      this.page.limit = size
      this.page.page = 1
      this.getData()
    },
    pagechange(page) {
      this.page.page = +page
      this.getData()
    },
    // 新增功能弹框功能
    Added() {
      this.isShow = true
      this.$refs.add.mode = 'add'
    },
    // 编辑弹框功能
    compiles(row) {
      this.isShow = true
      this.$refs.add.mode = 'edit'
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
    },
    // 删除功能
    async del(id) {
      console.log(id)
      await enterpriseRemove({ id })
      this.getData()
      this.$message.success('删除成功')
    },
    compile(id) {
      enterpriseStatus({ id: id }).then(() => {
        this.$message.success('修改成功')
        this.getData()
      })
    },
    // 搜索状态
    search() {
      this.getData()
      this.page.page = 1
    },
    // 清除按钮
    eliminate() {
      this.form = {
        eid: '',
        name: '',
        username: '',
        status: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.business {
  padding: 20px;
  .box-card {
    margin-bottom: 21px;
    .bgc {
      width: 100px;
      height: 39px;
    }
    .bgc1 {
      width: 149px;
      height: 39px;
    }
  }
  .red {
    color: red;
  }
}
</style>
